<template>
  <div class="table-box">
    <ProTable
      ref="proTableBox"
      :pagination="false"
      :init-param="dataGrid.initParam"
      :columns="dataGrid.columns"
      row-key="id"
      lazy
      :load="load"
      :expand-row-keys="dataGrid.expandRowKeys"
      :request-api="permissionFindByPid"
      :data-callback="dataCallBack"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @expand-change="expandChange"
    >
      <template #tableHeader>
        <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
      </template>

      <template #operation="{ row }">
        <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
      </template>
    </ProTable>

    <!-- 权限添加 -->
    <DialogForm
      :options="addForm.options"
      :title="addForm.title"
      :form-attrs="addForm.formAttrs"
      v-model:visible="addForm.visible"
      @get-model="form => (addForm.form = form)"
      @submit-form="saveAddForm"
    ></DialogForm>
  </div>
</template>

<script setup lang="ts">
import { ProTableInstance } from '@/components/ProTable/interface';

import { permissionFindByPid } from '$api/auth/permission';

import { useDataGrid } from './hooks/use-dataGrid';

const proTableBox = ref<ProTableInstance>();

const { dataGrid, dataCallBack, expandChange, load, addForm, saveAddForm } = useDataGrid(proTableBox);
</script>
